<template>
  <div class="home-container">
    <div class="files-container">
      <!--分类筛选帖子的标签栏-->
      <home-tab :category="category" />
      <!-- 帖子预览卡片带骨架屏 -->
      <el-skeleton :count="5" animated :loading="!loaded">
        <div
          v-if="loaded"
          v-infinite-scroll="loadMore"
          :infinite-scroll-disabled="disabled"
        >
          <div class="file-card-container">
            <file-card
              v-for="item in models.records"
              :key="item.id"
              :data="item"
            />
          </div>
        </div>
      </el-skeleton>
    </div>
    <!-- <home-aside /> -->
    <el-pagination v-if="loaded"
      :page-size="models.pageSize"
      :pager-count="models.totalCount"
      layout="prev, pager, next"
      :total="models.totalPage"
      class="pagination"
    />
  </div>
</template>

<script setup>
import { computed, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import { getPublicFiles } from '/src/api/netdisk'
import { useGetPage } from '/src/hooks/content/useGetPage'
import fileCard from '/src/components/FileCard/index.vue'

const route = useRoute()
const category = computed(() => route.params.category || 'default')

const { loaded, models, disabled, loadMore, getPaging } = useGetPage(
  1,
  5,
  getPublicFiles,
  { delay: 320 },
  category.value
)
// 将箭头函数作为category的一个依赖，category变化时重新执行该箭头函数
watchEffect(() => getPaging(1, 5, category.value))
</script>

<style lang="scss" scoped>
.pagination {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  margin: auto;
}
.file-card-container {
  display: flex;
}
.home-container {
  position: relative;

  // display: flex;
  width: 100%;
  height: 80vh;
  margin: auto;
  // height:100vh;
}

.files-container {
  border-radius: 4px;
}
</style>
